import React, { useState } from 'react'



// 默认的时候点击修改 count 会导致 Child 组件重新被渲染，可以通过 React.memo 这个
// 高阶组件解决无关组件重新渲染的问题
const Child = React.memo((props) => {

    console.log('Child 组件被执行了');

    return <h1>Child -- {props.name}</h1>
})

export default function App() {
    const [count, setCount] = useState(100)

    const [name, setName] = useState('小王')


    /*
        给子组件传递一个 name 属性，只有 name 属性发生改变的时候才会重新执行子组件
        name 没有改变，子组件就不会被重新执行。但是我们又给其传递了一个函数，那么
        当父组件中的 count 发生改变的时候会导致 App 组件重新渲染，此时会重新创建
        一个函数，那么该函数的地址就会发生改变，所以函数传给子组件了，所以子组件
        被重新执行了。
        我们需要将 changeName 做缓存，让 App 组件更新的时候不要重新创建 changeName
    */
    const changeName = (val) => {
        setName(val)
    }

    return (
        <div>
            <h1>App - {count}</h1>

            <button onClick={() => {
                setCount(count + 1)
            }}>点击增加</button>


            <hr />


            <Child name={name} changeNameFn={changeName} />
        </div>
    )
}
